
H5x.component("add-label",[],function(opts){  
    this.opts = opts; 
    this.container =  opts.container;
    this.use("render");
    this.use("emitter");
    this.init(); 

},{
    init:function(){
        var propname = this.opts.propname;
        var self = this;
        this.render("tp-add-label",{
            propname:propname
        });

        if(this.opts.value){
            var labels = this.opts.value.split(";");
            labels.forEach(function(label){
                self.container.find(".add-class-btn").before('<span class="class-label">'
                +label+'<span aria-hidden="true" class="label-close">&times;</span></span>');
            });

            this.container.find("input").val(this.opts.value);

        }

        this.container.find(".add-class-btn").click(function(){
            var classname = prompt("请输入班级名称！");
            if(!classname){
                return ;
            }
            
            $(this).before('<span class="class-label">'
                +classname+'<span aria-hidden="true" class="label-close">&times;</span></span>');
            self.resetClassName();
        });

        this.container.on("click",".label-close",function(){
            $(this).parent().remove();
            self.resetClassName();
        })
    },

    resetClassName:function(){
        var carr = [];
        this.container.find(".class-label").each(function(){
            var n = $(this).clone();
            n.find(".label-close").remove();
            carr.push(n.text());
            //console.log(n.text());
        });

        this.container.find("input").val(carr.join(";"));
    }
});